<!--料品选择框-->
<template>
  <div>
    <BasicModal v-bind="$attrs" @register="register" :title="modalTitle" width="800px" @ok="handleOk" destroyOnClose>
      <a-table :data-source="dataSources" :columns="columns" />
    </BasicModal>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, unref, watch,ref } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { productTempQgxList } from '/@/views/components/base.api';
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
import { selectProps } from '/@/components/Form/src/jeecg/props/props';
import { useAttrs } from '/@/hooks/core/useAttrs';


export default defineComponent({
  name: 'CalculateSelectModal',
  components: {
    //此处需要异步加载BasicTable
    BasicModal,
    BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
      loading: true,
    }),
  },
  props: {
    ...selectProps,
    //选择框标题
    modalTitle: {
      type: String,
      default: '计划订单-释放跟踪',
    },
    newId: {
      type: String,
    },
  },

  emits: ['register', 'getSelectResult'],
  setup(props, { emit }) {
    const dataSources = ref([]);
    const getList = async () => {
      if (props.newId) {
        const res = await productTempQgxList({ id: props.newId });
        dataSources.value = res;
      }
    };
    // getList();
    watch(
      () => props.newId, // 监听的响应式数据
      () => {        
        // 在数据变化时执行的操作
        getList();
      }
    );
    // defineExpose({
    //   async getList(){
    //     const res = await productTempQgxList({ id: '1676042904717598722' });
    //     console.log(res);
    //   }
    // });
    let type: number = 0; //1.产品BOM子件 2.产品BOM替代关系
    let marbasclassId: string = ''; //选择的料品分类id
    //注册弹框
    const [register, { closeModal }] = useModalInner(async (data) => {
      type = data.type;
      marbasclassId = data.marbasclassId;
    });
    const attrs = useAttrs();
    //表格配置
    const config = {
      canResize: false,
      bordered: true,
      size: 'small',
      rowKey: unref(props).rowKey,
      labelKey: 'name',
      isRadioSelection: true,
      // 请求之前对参数做处理
      beforeFetch(params) {
        params.marbasclassId = marbasclassId;
        params.materialTypeAttribute = 0;
      },
    };
    const searchInfo = ref(props.params);
    //   useModal((data: any) => {
    //     console.log(data);
    //   });
    //定义表格列
    const columns = [
      // {
      //   title: '供应类型',
      //   dataIndex: 'type',
      //   width: 40,
      //   align: 'left',
      //   componentProps: {
      //     dictCode: 'marbas_type',
      //     stringToNumber: true,
      //   },
      // },
      {
        title: '料品编码',
        dataIndex: 'materialCode',
        width: 40,
        align:'left',
      },
      {
        title: '料品名称',
        dataIndex: 'materialName',
        width: 120,
        align:'left',
      },
      {
        title: '规格',
        dataIndex: 'specifications',
        width: 40,
        align:'left',
      },
      {
        title: '数量',
        dataIndex: 'requisitionQuantity',
        align:'right',
        width: 40,
      },
      {
        title: '请购单编号',
        dataIndex: 'billCode',
        width: 120,
        align:'left',
      },
      {
        title: '请购单行号',
        dataIndex: 'rowNum',
        width: 80,
        align:'right',
      },
    ];

    /**
     * 确定选择
     */
    function handleOk() {
      getSelectResult((options, values) => {
        //回传选项和已选择的值
        emit('getSelectResult', options, values, type);
        //关闭弹窗
        closeModal();
      });
    }
    return {
      config,
      handleOk,
      searchInfo,
      register,
      dataSources,
      columns,
    };
  },
});
</script>
  